<template>
  <a-config-provider :locale="locale" :get-popup-container="popContainer">
    <div>
      <router-view />
      <audio id="player" ref="audioA" loop>
        <source src="/a.mp3" type="audio/mp3" />
      </audio>
      <audio id="player" ref="audioB" loop>
        <source src="/b.mp3" type="audio/mp3" />
      </audio>
    </div>
  </a-config-provider>
</template>

<script>
import { enquireScreen } from './utils/util'
import { mapState, mapMutations } from 'vuex'
import themeUtil from '@/utils/themeUtil'
import { getI18nKey } from '@/utils/routerUtil'
import { logout } from '@/services/user'

export default {
  name: 'App',
  data() {
    return {
      locale: {},
      src: '',
    }
  },
  created() {
    this.$channel.bind('logged-in', (res) => {
      if (res.uid === this.user.id) {
        logout()
        this.$router.push('/login')
      }
    })

    this.$channel.bind('notice-change', (res) => {
      this.$store.dispatch('account/noticeCount')
    })

    // this.$channel.bind('sell-change', (res) => {
    //   this.$store.dispatch('noticeCount')
    //   if (res.type === 'pending') {
    //     this.$refs.audio.play()
    //     console.log('pending ........')
    //   }
    // })

    this.$channel.bind('buy-change', (res) => {
      this.$store.dispatch('account/noticeCount')
      // if (res.type === 'pending') {
      //   this.$refs.audio.play()
      //   console.log('pending ........')
      // }
    })

    this.setHtmlTitle()
    this.setLanguage(this.lang)
    enquireScreen((isMobile) => this.setDevice(isMobile))
  },
  mounted() {
    const tick = setInterval(() => {
      if (this.$route.fullPath === '/login') {
        return
      }
      this.axios.get(`/a/tiemout-count`).then((res) => {
        res.data.data > 0 ? this.audioPlay('audioB') : this.audioStop('audioB')
      })
    }, 3000)

    this.$once('hook:beforeDestroy', () => {
      clearInterval(tick)
    })

    this.setWeekModeTheme(this.weekMode)
  },
  watch: {
    '$route.path': function (val) {
      if (val === '/login') {
        this.audioStop()
      }
    },
    tooking: {
      handler(val, old) {
        this.alarmCount > 0
          ? this.audioPlay('audioA')
          : this.audioStop('audioA')
      },
      immediate: true,
    },
    checking: {
      handler(val, old) {
        this.alarmCount > 0
          ? this.audioPlay('audioA')
          : this.audioStop('audioA')
      },
      immediate: true,
    },
    weekMode(val) {
      this.setWeekModeTheme(val)
    },
    lang(val) {
      this.setLanguage(val)
      this.setHtmlTitle()
    },
    $route() {
      this.setHtmlTitle()
    },
    'theme.mode': function (val) {
      let closeMessage = this.$message.loading(
        `您选择了主题模式 ${val}, 正在切换...`,
      )
      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
    },
    'theme.color': function (val) {
      let closeMessage = this.$message.loading(
        `您选择了主题色 ${val}, 正在切换...`,
      )
      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
    },
    layout: function () {
      window.dispatchEvent(new Event('resize'))
    },
  },
  computed: {
    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang']),
    ...mapState('account', ['user', 'tooking', 'checking']),
    alarmCount() {
      return 1 * this.tooking + 1 * this.checking
    },
  },
  methods: {
    ...mapMutations('setting', ['setDevice']),
    setWeekModeTheme(weekMode) {
      if (weekMode) {
        document.body.classList.add('week-mode')
      } else {
        document.body.classList.remove('week-mode')
      }
    },
    setLanguage(lang) {
      this.$i18n.locale = lang
      switch (lang) {
        case 'CN':
          this.locale =
            require('ant-design-vue/es/locale-provider/zh_CN').default
          break
        case 'HK':
          this.locale =
            require('ant-design-vue/es/locale-provider/zh_TW').default
          break
        case 'US':
        default:
          this.locale =
            require('ant-design-vue/es/locale-provider/en_US').default
          break
      }
    },
    setHtmlTitle() {
      const route = this.$route
      const key =
        route.path === '/'
          ? 'home.name'
          : getI18nKey(route.matched[route.matched.length - 1].path)
      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
    },
    popContainer() {
      return document.getElementById('popContainer')
    },
    audioStop(ref) {
      if (this.$refs[ref]) {
        this.$refs[ref].pause()
        this.$refs[ref].currentTime = 0
      }
    },
    audioPlay(ref) {
      if (this.$refs[ref] && this.$refs[ref].paused) {
        this.$refs[ref].play()
      }
    },
  },
  beforeDestroy() {
    this.audioStop()
  },
}
</script>

<style lang="less" scoped>
</style>
